<template>
	<view class="user">
		<!-- v-if="!isLogin"-->
		<view>
			<view class="user-top-padding">
				<view class="userTopBg" :style="'background-image: url(' + userTopImages + ');'">
					<view class="vipNameView">
						<text>等级：{{userInfo.level == 2 ? 'VIP' :userInfo.level == 3 ? '联创' : userInfo.vipName||'' }}</text>
						<!-- <text class="btn" v-if="userInfo.level == 4 && userInfo.isOpenCrown != 'Y'"
							@click="upgradeApplication">升级股东</text>
						<text class="btn" v-if="userInfo.level == 4 && userInfo.isOpenCrown == 'Y'">联合股东</text> -->
					</view>
				</view>
				<view class="wrapper">
					<view class="nav row-middle">
						<view class="userinfo_view" v-if="token || userInfo.phone">
							<view class="imageView" @click="goPersonalData()">
								<image :src="userInfo.avatar" />
							</view>

							<view class="avatarNameView">
								<text>{{ userName }}</text>
								<image :src="userInfo.vipIcon" mode=""></image>
							</view>

							<view class="userUidView">
								<text>ID:{{ userInfo.uid }}</text>
							</view>
							<view class="phoneView" v-if="userInfo.phone" @click="goPersonalData()">
								<text class="phoneMargin">手机：{{phone}}</text>
								<text class="iconfont icon-bianji1"></text>
							</view>

							<!-- #ifdef MP-WEIXIN -->
							<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="binding" v-else>
								<text>绑定手机</text>
							</button>
							<!-- #endif -->

							<!-- #ifndef MP-WEIXIN -->
							<button class="binding" @click="goBindPhone()" v-else>
								<text>绑定手机</text>
							</button>
							<!-- #endif -->
						</view>
						<view class="login_but" v-else>
							<button type="warn" size='mini' @click="openLogin">用户登录</button>
						</view>
						<view class="item" @click="goProfit()">
							<text class="num">{{ todayPrice || 0 }}</text>
							<text>今日统计</text>
						</view>
						<!-- <view class="item" @click="goProfit()">
							<text class="num">{{ totalPrice || 0 }}</text>
							<text>累计积分</text>
						</view> -->
						<view class="item" @click="goProfit()">
							<text class="num">{{ nowMoney || 0}}</text>
							<text>可用积分</text>
						</view>
					</view>
					<view class="myOrder">
						<view class="title acea-row row-between-wrapper">
							<text>我的订单</text>
							<text @click="goMyOrder(0)" class="allOrder">
								<text>全部订单</text>
								<text class="iconfont icon-jiantou"></text>
							</text>
						</view>
						<view class="orderState acea-row row-middle">
							<view @click="goMyOrder(0)" class="item">
								<view class="pictrue">
									<image :src="userOrderUnpaidImg" />
									<text class="order-status-num"
										v-if="userInfo.orderStatusNum.unpaidCount > 0">{{ userInfo.orderStatusNum.unpaidCount }}</text>
								</view>
								<view>待付款</view>
							</view>
							<view @click="goMyOrder(1)" class="item">
								<view class="pictrue">
									<image :src="userOrderPaidImg" />

									<text class="order-status-num"
										v-if="userInfo.orderStatusNum.unshippedCount > 0">{{ userInfo.orderStatusNum.unshippedCount }}</text>

								</view>
								<view>待发货</view>
							</view>
							<view @click="goMyOrder(4)" class="item">
								<view class="pictrue">
									<image :src="userOrderShippedImg" />
									<text class="order-status-num"
										v-if="userInfo.orderStatusNum.receivedCount > 0">{{ userInfo.orderStatusNum.receivedCount }}</text>
								</view>
								<text>已完成</text>
							</view>
						</view>
					</view>
					<view class="myService">
						<view class="title">我的服务</view>
						<view class="serviceList acea-row row-middle">
							<view class="tab" v-for="(item, MyMenusIndex) in MyMenus" :key="MyMenusIndex"
								@click="goPages(MyMenusIndex)" v-if="userInfo.level >= item.level && item.uniapp_url != '自定义客服'">
								<image :src="item.pic" />
								<view class="text">{{ item.name }}</view>
							</view>
							<button 
							open-type="contact" 
							class="tab button-tab" 
							v-for="(item, MyMenusIndex) in MyMenus" 
							:key="MyMenusIndex"
							v-if="item.uniapp_url == '自定义客服'">
								<image :src="item.pic" />
								<view class="text">{{ item.name }}</view>
							</button>
						</view>
					</view>
				</view>
				<view class="by">
					<button class="imageView" open-type="contact">
						<image :src="userBottomLogo" mode="widthFix" show-menu-by-longpress></image>
					</button>
				</view>
				
			</view>
			<UserMandate @closePage="closePage" v-if="isUserMandate"></UserMandate>
		</view>
		<Authorization v-if="isLogin" />
		<!-- <uni-popup ref="popup" type="center" @change=popupChange>
			<BoxesInfo v-if="isBoxesInfo"></BoxesInfo>
		</uni-popup> -->
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getUserInfo,
		getMenuUser,
		bindingPhone,
		wxappBindingPhone,
		getUserIntegral,
		getUser4Promotion
	} from '@/api/user'
	import {
		isWeixin,
		systemPrompt,
		interval,
		VUE_APP_RESOURCES_URL
	} from '@/utils'
	import cookie from '@/utils/store/cookie'
	import SwitchWindow from '@/components/SwitchWindow'
	import Authorization from '@/pages/authorization/index'
	import UserMandate from '../UserMandate/index.vue'
	const NAME = 'User'
	export default {
		name: NAME,
		components: {
			SwitchWindow,
			Authorization,
			UserMandate
		},
		data: function() {
			return {
				MyMenus: [],
				switchActive: false,
				isWeixin: false,
				todayPrice: 0,
				totalPrice: 0,
				nowMoney: 0,
				phone: '111',
				userName: '',
				userTopImages: '',
				userBottomLogo: '',
				userOrderPaidImg: '',
				userOrderShippedImg: '',
				userOrderUnpaidImg: '',
				// 是否显示用户昵称头像授权页面
				isUserMandate: false,
				isBoxesInfo: false,
				// 是否打开登录页
				isLogin: false,
			}
		},
		computed: mapGetters(['userInfo', "token"]),
		methods: {
			...mapMutations(['updateAuthorizationPage']),
			goMyOrder(type) {
				this.$yrouter.push({
					path: '/pages/order/MyOrder/index',
					query: {
						type,
					},
				})
			},
			goBindPhone() {
				this.$yrouter.push({
					path: '/pages/user/BindingPhone/index',
				})
			},
			goUserCoupon() {
				this.$yrouter.push('/pages/user/coupon/UserCoupon/index')
			},
			goIntegral() {
				this.$yrouter.push('/pages/user/signIn/Integral/index')
			},
			goUserPromotion() {
				this.$yrouter.push('/pages/user/promotion/UserPromotion/index')
			},
			goProfit(id) {
				this.$yrouter.push({
					path: "/pages/user/promotion/UserPromotion/index",
					query: {
						id: id,
					},
				});
			},
			goPersonalData() {
				this.$yrouter.push('/pages/user/PersonalData/index')
			},
			getPhoneNumber: function(e) {
				let thit = this
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '绑定中',
					})
					wxappBindingPhone({
							encryptedData: e.mp.detail.encryptedData,
							iv: e.mp.detail.iv,
						})
						.then(res => {
							thit.$store.dispatch('userInfo', true)
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000,
							})
						})
						.catch(error => {
							uni.hideLoading()
							thit.$store.dispatch('userInfo', true)
							uni.showToast({
								title: error.msg || error.response.data.msg || error.response.data.message,
								icon: 'none',
								duration: 2000,
							})
						})
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			changeswitch: function(data) {
				this.switchActive = data
			},
			customer_service(){
				this.$yrouter.push({
					path: '/pages/stemService/index'
				});
				
			},
			MenuUser: function() {
				let that = this
				getMenuUser()
					.then(res => {
						uni.hideLoading()
						console.log(res.data.routine_my_menus)
						that.MyMenus = res.data.routine_my_menus
						this.dataLoing = true
						console.log(111111111)
						this.UserIntegral()
						console.log(22222222)
					})
					.catch(error => {
						uni.hideLoading()
					})
			},
			UserIntegral() {
				getUserIntegral()
					.then(res => {
						this.todayPrice = interval(res.data.todayPrice);
						this.totalPrice = interval(res.data.totalPrice);
						if (this.userInfo.nickname.length > 8) {
							this.userName = this.userInfo.nickname.substring(0, 5) + "..."
						} else this.userName = this.userInfo.nickname
					})
					.catch(error => {})
			},
			goPages: function(index) {
				let url = this.MyMenus[index].uniapp_url
				if (!this.userInfo.status) {
					systemPrompt()
					return
				}
				if (url === '/pages/user/promotion/UserPromotion/index' && this.userInfo.statu === 1) {
					if (!this.userInfo.isPromoter) {
						uni.showToast({
							title: '您还没有推广权限！！',
							icon: 'none',
							duration: 2000,
						})
						return
					}
				}
				if (url === '/pages/orderAdmin/OrderIndex/index' && !this.userInfo.adminid) {
					uni.showToast({
						title: '您还不是管理员！！',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				if (url === '/pages/user/operationCenter/index' && this.userInfo.isOpen === '0') {
					uni.showModal({
						title: '提示',
						content: '您还没有开通运营中心功能，请联系客服开通再操作！',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/stemService/index'
								});
							} else if (res.cancel) {}
						}
					});
					return
				}
				if (url === '/pages/user/promotion/Poster/index') {
					if(this.userInfo.uid != 666 && this.userInfo.uid != 777 && this.userInfo.uid != 888 && this.userInfo.uid != 999){
						if(this.userInfo.spreadUid == 0 || this.userInfo.level == 1){
							uni.showModal({
								title: '提示',
								content: '您还没有绑定上级或者未成为VIP，暂不能使用分享海报！',
								success: function(res) {
									if (res.confirm) {} else if (res.cancel) {}
								}
							});
							return
						}/* else{
							if(this.userInfo.isOpenLian !='Y'){
								uni.showModal({
									title: '提示',
									content: '推广二维码需要从新手达人升级成达人权限，是否完成问卷考核成为达人？',
									success: function(res) {
										if (res.confirm) {
											this.$yrouter.push({
												path: '/pagesB/view/questionnaire/index',
												query: {
													type: 3,
												},
											});
										} else if (res.cancel) {}
									}.bind(this)
								});
								return
							}
						} */
					}
				}
				// if (url === '/pagesB/warrant/index' && this.userInfo.isThrough != 'Y' ) {
				// 	uni.showModal({
				// 		title: '温馨提示',
				// 		content: '需要购买黄金或者钻石直通车才能生成授权证书',
				// 		success: function(res) {
				// 			if (res.confirm) {} else if (res.cancel) {}
				// 		}
				// 	});
				// 	return
				// }
				if (url === '/pages/orderAdmin/OrderCancellation/index' && !this.userInfo.checkStatus) {
					uni.showToast({
						title: '您没有核销权限,请后台店员设置！！',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				this.$yrouter.push({
					path: this.MyMenus[index].uniapp_url,
				})
			},
			goPages2: function() {
				this.$yrouter.push({
					path: '/pages/shop/GoodsList/index',
					query: {
						title: '积分商城',
						isIntegral: true,
					},
				})
			},

			updateDate() {
				uni.showLoading({
					title: '加载中',
				})
				this.$store.dispatch('getUser').then(res => {
					console.log(88888);
					this.nowMoney = interval(this.userInfo.nowMoney)
					console.log(this.userInfo.phone);
					this.phone = this.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
					console.log(9999);
					console.log(this.phone);
					this.MenuUser()
				}).catch(err => {
					console.log(err);
				})
				this.isWeixin = isWeixin()
			},
			upgradeApplication() {
				getUser4Promotion()
					.then(res => {
						if (res.data.isPromotion != 'Y') {
							uni.showModal({
								title: '温馨提示',
								content: '抱歉！您的团队人数未达到要求，请满足条件再申请。',
								success: function(res) {
									if (res.confirm) {} else if (res.cancel) {}
								}
							});
							return
						} else {
							if (res.data.isSatisfiedPeoper != 'Y') {
								uni.showModal({
									title: '温馨提示',
									content: '抱歉！您还不具备拥有3个高级合伙人直属，请满足条件再申请。',
									success: function(res) {
										if (res.confirm) {} else if (res.cancel) {}
									}
								});
								return
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '您已满足晋升联合股东的要求，请尽快联系工作人员，按照要求提交升级申请，我司会在1-2个工作日完成审核',
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/stemService/index'
											});
										} else if (res.cancel) {}
									}
								});
							}
						}
					})
					.catch(error => {})
			},
			// 关闭获取用户头像和昵称页面
						closePage() {
			
							this.isUserMandate = false
						},
			// 打开登录页面
			openLogin() {
				this.isLogin = true
			},
			// 关闭登录页面
						closeLogin(refresh = false) {
							if (refresh) {
								this.MenuUser()
							}
							this.isLogin = false
						}
		},
		// watch: {
		// 	userInfo() {
		// 		this.MenuUser()
		// 	},
		// },
		onShow() {
			// this.$store.dispatch('getUser', true)
			//if (this.$store.getters.token) {
			if (this.token) {
				uni.showLoading({
					title: '加载中',
				})
				this.$store.dispatch('getUser').then(res => {
					this.nowMoney = interval(this.userInfo.nowMoney)
					this.phone = this.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
					this.MenuUser()
				}).catch(err => {
					console.log(err);
				})
				this.isWeixin = isWeixin()
				this.isLogin = false
			}
			this.userTopImages = this.$store.getters.userTopImages
			this.userBottomLogo = this.$store.getters.userBottomLogo
			this.userOrderPaidImg = this.$store.getters.userOrderPaidImg
			this.userOrderShippedImg = this.$store.getters.userOrderShippedImg
			this.userOrderUnpaidImg = this.$store.getters.userOrderUnpaidImg
		},
		mounted() {
			this.isLogin = false
		},
		onHide() {
			this.updateAuthorizationPage(false)
		},
	}
</script>
<style lang="less">
	page {
		background: #FFFFFF;
	}

	.user {
		background: #F7F7F7;
	}

	.user-top-padding {
		padding-top: 145rpx;
		position: relative;

		.userTopBg {
			position: absolute;
			top: 0;
			left: 0;
			height: 500rpx;
			width: 100%;
			background-size: 100% 100%;

			.vipNameView {
				position: absolute;
				top: 390rpx;
				left: 195rpx;
				color: #daad73;
				font-weight: bold;

				.btn {
					color: orange;
					border: orange solid 1rpx;
					border-radius: 30rpx;
					padding: 5rpx 20rpx;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
		}

		.ViewBills {
			position: absolute;
			right: 0;
			top: 170rpx;
			background-color: #ff6a00;
			color: #FFFFFF;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			z-index: 10;
		}
	}

	.userinfo_view {
		position: absolute;
		top: -60rpx;
		left: 0;
		width: 100%;
		height: 120rpx;


		.imageView {
			width: 120rpx;
			height: 120rpx;
			margin-left: 50rpx;
			float: left;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 3rpx solid #f5f5f5;
			}
		}

		.avatarNameView {
			height: 50rpx;
			width: calc(100% - 180rpx);
			color: #FFFFFF;
			line-height: 50rpx;
			font-size: 30rpx;
			float: left;
			padding-left: 25rpx;
			margin-top: 10rpx;

			image {
				height: 40rpx;
				width: 40rpx;
				vertical-align: middle;
				margin-left: 20rpx;
			}
		}

		.vipNameView {
			height: 50rpx;
			width: auto;
			padding: 0 20rpx;
			border-radius: 50rpx;
			background-color: #ff3334;
			color: #FFFFFF;
			line-height: 50rpx;
			font-size: 26rpx;
			display: inline-block;
			float: left;
			margin-top: 5rpx;
			margin-left: 10rpx;
		}

		.userUidView {
			height: 50rpx;
			width: auto;
			padding: 0 20rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			font-size: 26rpx;
			display: inline-block;
			float: left;
			margin-top: 5rpx;
			margin-left: 10rpx;
		}

		.phoneView {
			float: left;
			font-size: 28rpx;
			margin-top: 9rpx;
			color: #FFFFFF;
		}

		.binding {
			height: 60rpx;
			line-height: 60rpx;
			float: left;
			margin-top: -4rpx;
			padding: 0 30rpx;
			border-radius: 70rpx;
			background: -webkit-linear-gradient(to left, #f0c794, #ae9273);
			/* Safari 5.1-6.0 */
			background: -o-linear-gradient(to left, #f0c794, #ae9273);
			/* Opera 11.1-12.0 */
			background: -moz-linear-gradient(to left, #f0c794, #ae9273);
			/* Firefox 3.6-15 */
			background: linear-gradient(to left, #f0c794, #ae9273);
			/* 标准语法 */
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}

	.footer-line-height {
		height: 1 * 100rpx;
	}

	.user .wrapper .nav .item {
		text-align: center;
		font-size: 26rpx;
		color: #aaa;
		width: 33.33333333%;
		float: left;
		margin-top: 75rpx;
	}

	.user .wrapper .nav {
		height: 190rpx;
	}

	// .user .wrapper .nav .item:nth-child(1) {
	// 	border-right: #e8e8e8 solid 2rpx;
	// }

	// .user .wrapper .nav .item:nth-child(2) {
	// 	border-right: #e8e8e8 solid 2rpx;
	// }

	.bg-color-reds {
		background-color: #bf1146;
	}

	.order-status-num {
		min-width: 0.33 * 100rpx;
		background-color: #fff;
		color: #eb3729;
		border-radius: 15px;
		position: absolute;
		right: -0.14 * 100rpx;
		top: -0.15 * 100rpx;
		font-size: 0.2 * 100rpx;
		padding: 0 0.08 * 100rpx;
		border: 1px solid #eb3729;
	}

	.pictrue {
		position: relative;
	}

	.switch-h5 {
		margin-left: 0.2 * 100rpx;
	}

	.binding {
		margin-top: 0.1 * 100rpx;
		display: inline-block;
		padding: 0.1 * 100rpx 0.3 * 100rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 50px;
		font-size: 0.22 * 100rpx;
		line-height: 1.5;
		border: 1rpx solid rgba(0, 0, 0, 0.7);
		color: #ffffff;
	}

	.by {
		text-align: center;
		padding: 30rpx 0;
		overflow: hidden;
		width: 100%;
		
		.imageView {
			width: 100%;

			image {
				height: 100%;
				width: 100%;
			}
		}
	}

	.by-text {
		text-align: center;
		font-size: 24rpx;
	}

	.head_box {
		width: 750rpx;
		// background: #fff;
		transition: all linear 0.3s;

		/deep/.cuIcon-back {
			display: none;
		}

		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.head_box {
		position: fixed;
		top: 0;
		z-index: 100;
	}

	.nav-title {
		margin-left: 30rpx;
		line-height: 40px;
	}

	.acea-row .tab {
		width: 25%;
		padding: 30rpx 0;
		text-align: center;
	}
	
	.acea-row .button-tab{
		line-height: inherit;
		margin-left: inherit;
		background-color: none !important;
		background: none !important;
	}
	
	.acea-row .button-tab::after{
		border: none !important;
	}

	.acea-row .tab .text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.acea-row .tab image {
		width: 70rpx;
		height: 70rpx;
	}

	.bg-color-blue {
		background-color: #8196e6;
	}

	.phoneMargin {
		margin-left: 20rpx;
	}
</style>
